<template>
  <h2>选项式api</h2>
  <p>count: {{ count }}</p>
  <p>num: {{ num }}</p>
  <button @click="fn">btn</button><br />
  <button @click="fn2(2)">btn2</button><br />
  <button @click="fn2(3)">btn3</button>
  <br />
  <li v-for="item in oddlist" :key="item">{{ item }}</li>
  <br />
  <input type="text" @input="handler" />
  <p>pinia count: {{ opcount }}</p>
  <p>pinia doublecountop: {{ doublecountop }}</p>
  <button @click="add">btn4</button>
  <Child1 :num="num" :obj="obj"></Child1>
  <br />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useCounterOPStore } from "@/stores/counterOP";
import Child1 from "./components/Child1.vue";
import { mapState, mapActions } from "pinia";
export interface objType {
  name: string;
  age: number;
}

interface dataType {
  num: number;
  count: number | string;
  list: number[];
  obj: objType;
}
export default defineComponent({
  data(): dataType {
    return {
      num: 1,
      count: "lisi",
      list: [1, 2, 3, 4, 5, 6, 7],
      obj: {
        name: "yy",
        age: 20,
      },
    };
  },
  components: {
    Child1,
  },
  methods: {
    ...mapActions(useCounterOPStore, ["add"]),
    fn(): void {
      // this.count++;
      this.count = "zwf";
    },
    fn2(n: number): void {
      this.num += n;
    },
    handler(e: Event): void {
      console.log((e.target as HTMLInputElement).value);
    },
  },
  computed: {
    oddlist(): number[] {
      return this.list.filter((item: number) => item % 2);
    },
    ...mapState(useCounterOPStore, ["opcount", "doublecountop"]),
  },
});
</script>
